<template>
    <div class="datail-page">
        <!-- 标题 -->
        <div class="datail-page-content">
            <van-nav-bar title="商品详情" left-text="返回" left-arrow>
            </van-nav-bar>
            <div class="content">
                <!-- 图片 -->
                <div class="img"><img src="https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40pro%2B.png" alt=""></div>
                <div class="text">
                    <h5> HUAWEI Mate 40 Pro+ 5G 全网通 12G... </h5>
                    <p>5nm麒麟9000旗舰芯片 | 超感光徕卡电...</p>
                    <div class="by">免邮费 顺丰快递</div>
                    <div class="yuan"><span>￥7988</span></div>
                </div>
            </div>
            
        </div>
        <div class="bottom">
            <button class="bottom1">加入购物车</button>
            <button class="bottom2">立即购买</button>
        </div>
        
    </div>
</template>

<script>

export default {
  name: '',

  components: {},

  data() {
    return {}
  },

  created() {},

  methods: {},

}

</script>

<style scoped>
.content{
    .img{
        display: flex;
        justify-content: center;
        img{
            
            height: 100px;
        }
    }
    h5{
        font-size: 18px;
    }
    p{
        font-size: 14px;
    }
    .by{
        font-size: 14px;
        color: #999;
        padding: 5px 0;
    }
    .yuan{
        color:#f63515;
        font-size: 22px;
    }
}
.text{
    padding: 0 10px;
}
.datail-page-left{
    position: absolute;
    top: 0;
    bottom: 0;
    cursor: pointer;
}
.van-nav-bar-text{
    color: #1989fa;
}
.bottom{
    padding: 0 5px;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    .bottom1{
        height: 40px;
        width: 50%;
        box-sizing: border-box;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        border: none;
        background: #6bd8d8;
        color: #fff;
    }
    .bottom2{
        height: 40px;
        width: 50%;
        box-sizing: border-box;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
        border: none;
        background: #0dc3c3;
        color: #fff;
    }
}
</style>